<template>
    <Form ref="form" :model="data" :rules="rules" :label-width="labelWidth" :label-position="labelPosition">
        <Row :gutter="12" type="flex">
            <Col v-bind="grid" class="ivu-mb-16">
                <DatePicker type="daterange" v-width="'100%'" v-model="data.date" placeholder="日期选择" element-id="date" />
            </Col>
            <Col v-bind="grid">
                <Input v-model="data.name" placeholder="请输入患者姓名/手机号/诊疗号" element-id="name" />
            </Col>
            <Col v-bind="grid">
                    <Select v-model="data.personnel" placeholder="所属医助" element-id="personnel" :clearable="true">
                        <Option :value="0">高玲</Option>
                        <Option :value="1">王艳</Option>
                        <Option :value="2">刘志强</Option>
                    </Select>
            </Col>
            <Col v-bind="grid">
                    <Select v-model="data.diagnosis" placeholder="就诊类型" element-id="diagnosis" :clearable="true">
                        <Option :value="0">初诊</Option>
                        <Option :value="1">复诊</Option>
                        <Option :value="2">未及时复诊</Option>
                        <Option :value="3">抗复发</Option>
                        <Option :value="4">流失</Option>
                        <Option :value="5">断诊</Option>
                    </Select>
            </Col>
            <Col v-bind="grid">
                <Select v-model="data.Effect" placeholder="效果类型" element-id="Effect" :clearable="true">
                    <Option :value="0">扩散</Option>
                    <Option :value="1">无效</Option>
                    <Option :value="2">见效-10%</Option>
                    <Option :value="3">见效-50%</Option>
                    <Option :value="4">治愈-90%</Option>
                    <Option :value="5">复发</Option>
                </Select>
            </Col>
            <template v-if="collapse">
                <Col v-bind="grid">
                    <Select v-model="data.risk" placeholder="风控类型" element-id="risk" :clearable="true">
                        <Option :value="0">敏感</Option>
                        <Option :value="1">正常</Option>
                        <Option :value="2">黑名单</Option>
                        <Option :value="3">领导介绍</Option>
                    </Select>
                </Col>
                <Col v-bind="grid">
                    <Select v-model="data.treatment" placeholder="诊疗评估" element-id="treatment" :clearable="true">
                        <Option :value="0">是否住院</Option>
                        <Option :value="1">留观</Option>
                        <Option :value="2">手术</Option>
                    </Select>
                </Col>
                <Col span="8">
                    <FormItem label="部位">
                        <Select v-model="model12" filterable multiple>
                            <Option v-for="item in positionList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="标签">
    <Select v-model="model7" filterable multiple>>
        <OptionGroup label="营销">
            <Option v-for="item in cityList1" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </OptionGroup>
        <OptionGroup label="活动">
            <Option v-for="item in cityList2" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </OptionGroup>
    </Select>
                    </FormItem>
                </Col>
            </template>
            <Col v-bind="grid" class="ivu-text-right" >
                    <Button type="primary" @click="handleSubmit">查询</Button>
                    <Button class="ivu-ml-8" @click="handleReset">重置</Button>
                    <a v-font="14" class="ivu-ml-8" @click="collapse = !collapse">
                        <template v-if="!collapse">
                            展开 <Icon type="ios-arrow-down" />
                        </template>
                        <template v-else>
                            收起 <Icon type="ios-arrow-up" />
                        </template>
                    </a>
            </Col>
        </Row>
    </Form>
</template>
<script>
    import { mapState } from 'vuex';
    export default {
        data () {
            return {
                cityList: [
                    {
                        value: '在乎费用',
                        label: '在乎费用'
                    },
                    {
                        value: '专家',
                        label: '专家'
                    },
                    {
                        value: '敏感',
                        label: '敏感'
                    },
                    {
                        value: '远程',
                        label: '远程'
                    }
                ],
                cityList1: [
                    {
                        value: '复诊',
                        label: '复诊'
                    },
                    {
                        value: '专家',
                        label: '专家'
                    },
                    {
                        value: '权威',
                        label: '权威'
                    }
                ],
                cityList2: [
                    {
                        value: '专家活动',
                        label: '专家活动'
                    },
                    {
                        value: '折扣活动',
                        label: '折扣活动'
                    },
                    {
                        value: '援助活动',
                        label: '援助活动'
                    }
                ],
                model7: '',
                positionList: [
                    {
                        value: '头部',
                        label: '头部'
                    },
                    {
                        value: '面部',
                        label: '面部'
                    },
                    {
                        value: '四肢',
                        label: '四肢'
                    },
                    {
                        value: '脚部',
                        label: '脚部'
                    }
                ],
                model12: [],
                model13: [],
                grid: {
                    xl: 4,
                    lg: 8,
                    md: 12,
                    sm: 24,
                    xs: 24
                },
                collapse: false,
                data: {
                    name: '',
                    date: '',
                    consultant: '',
                    personnel: '',
                    diagnosis: '',
                    treatment: '',
                    risk: ''
                },
                rules: {

                }
            }
        },
        computed: {
            ...mapState('admin/layout', [
                'isMobile'
            ]),
            labelWidth () {
                return this.isMobile ? undefined : 100;
            },
            labelPosition () {
                return this.isMobile ? 'top' : 'right';
            }
        },
        methods: {
            handleSubmit () {
                this.$emit('on-submit', this.data);
            },
            handleReset () {
                this.$refs.form.resetFields();
                this.$emit('on-reset');
            }
        }
    }
</script>
